<template>
  <div class="my">
    <!------------------------------------------------------顶部导航------------------------------------------------------------------>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="HeaderBox">
        <div class="HeaderBg">
          <van-nav-bar :border="false">
            <van-icon name="setting-o" slot="right" @click="$router.push('/seting')" />
          </van-nav-bar>
        </div>
        <div class="HeaderUser">
          <div class="container">
            <div class="MyUser">
              <div class="userHaderBox">
                <!-- 头像 -->
                <van-image round :src="GetUserBy_user.portrait">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
                <!-- 用户 -->
                <div class="userNameBox">
                  <!-- 用户名称 -->
                  <p class="userName">{{GetUserBy_user.name}}</p>
                  <!-- 身份勋章 -->
                  <div class="userIcon" @click="$router.push('/listreal')">
                    <van-icon name="shop" />
                    <van-icon name="gem" />
                    <van-icon name="award" />
                    <van-icon name="manager" />
                    <van-icon name="card" />
                    <span class="icoClick">
                      点亮身份
                      <van-icon name="arrow" />
                    </span>
                  </div>
                </div>
                <!-- 积分标识 -->
                <div class="integralBox">
                  <van-icon name="diamond" />
                  <span>积分：12312</span>
                </div>
              </div>
              <!-- 收藏 -->
              <van-grid :border="false" :column-num="4">
                <van-grid-item>
                  <p class="UserListNumb">{{ GetUserBy.collectionCount }}</p>
                  <p class="UserHeaderName">收藏</p>
                </van-grid-item>
                <van-grid-item>
                  <p class="UserListNumb">{{ GetUserBy.fansCount }}</p>
                  <p class="UserHeaderName">粉丝</p>
                </van-grid-item>
                <van-grid-item>
                  <p class="UserListNumb">{{GetUserBy.attentionCount}}</p>
                  <p class="UserHeaderName">关注</p>
                </van-grid-item>
                <van-grid-item>
                  <p class="UserListNumb">{{GetUserBy.footprintCount}}</p>
                  <p class="UserHeaderName">足迹</p>
                </van-grid-item>
              </van-grid>
            </div>
          </div>
        </div>
      </div>

      <div class="my_container">
        <!------------------------------------------------------Body内容------------------------------------------------------------------>
        <div class="container orderBox">
          <van-cell title="我的订单" is-link value="查看全部" to="/myorder?type=0" />
          <van-grid :column-num="5" :border="false">
            <van-grid-item icon="cart" text="待付款" @click="$router.push('/myorder?type=1')" />
            <van-grid-item icon="send-gift" text="待发货" @click="$router.push('/myorder?type=2')" />
            <van-grid-item icon="gift" text="待收货" @click="$router.push('/myorder?type=3')" />
            <van-grid-item icon="comment" text="已完成" @click="$router.push('/myorder?type=4')" />
            <van-grid-item icon="goods-collect" text="售后" />
          </van-grid>
        </div>
      </div>
      <div class="boxLit">
        <!-- <div class="container"> -->
        <van-grid :column-num="4">
          <van-grid-item icon="shop-o" text="商家中心" />
          <van-grid-item icon="chat-o" text="评价中心" />
          <van-grid-item icon="browsing-history-o" text="鉴真阁" />
          <van-grid-item icon="flag-o" text="我的地址" @click="$router.push('./addressList')"/>
          <van-grid-item icon="service-o" text="客服中心" />
        </van-grid>
        <!-- </div> -->
      </div>
    </van-pull-refresh>
    <!-- 底部导航 -->
    <Tabbar :active="3"></Tabbar>
  </div>
</template>
<script>
/* ... */
import Tabbar from '@/components/Tabbar.vue'
import { getShopUserById } from '@/api/api'

export default {
  name: 'my',

  mixins: [],

  components: {
    Tabbar
  },

  props: {},

  data () {
    return {
      count: 0,
      isLoading: false,
      GetUserBy: {},
      GetUserBy_user: {},
      GetUserBy_role: {}
    }
  },

  computed: {},

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
      this.GetJson()
    } else {
      this.$toast.fail('您未曾登陆')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    GetJson () {
      let postData = { }
      getShopUserById(this.$qs.stringify(postData))
        .then(res => {
          // console.log(res.data.data.user[0])
          this.GetUserBy = res.data.data
          this.GetUserBy_user = res.data.data.user[0]
          this.GetUserBy_role = res.data.data.role[0]
          // console.log(this.GetUserBy_role.id)
          if (res.data.code === 200) {
            if (this.GetUserBy_user.status !== 0) {
              this.$toast('当前用户异常，请联系客服咨询解决。')
            }
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        // this.$toast('刷新成功')
        this.isLoading = false
        this.count++
        this.GetJson()
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */
.my {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    overflow: visible;
  }
  .HeaderBox {
    position: relative;
    width: 100%;
    // overflow: auto;
    .HeaderBg {
      background-color: #d7b782;
      height: 111px;
      .van-nav-bar {
        background-color: transparent;
        .van-icon {
          color: #ffffff;
        }
      }
    }
    .HeaderUser {
      position: absolute;
      width: 100%;
      top: 44px;
      .MyUser {
        width: 100%;
        border-radius: 2px;
        background-color: #ffffff;
        box-shadow: 0 2px 2px 2px rgba(216, 216, 216, 0.2);
        .userHaderBox {
          padding: 23.5px 22px 10px;
          position: relative;
          .van-image {
            width: 44px;
            height: 44px;
            position: static;
            vertical-align: top;
          }
          .userNameBox {
            vertical-align: top;
            display: inline-block;
            margin-left: 10px;
            .userName {
              margin: 0;
              margin-bottom: 4px;
              font-size: 16px;
              font-weight: bold;
              color: #333333;
            }
            .userIcon {
              font-size: 14px;
              color: #cab9ba;
              i {
                margin: 0 2px;
                vertical-align: middle;
              }
              .icoClick {
                vertical-align: middle;
                font-size: 10px;
                color: #ffbb00;
                margin-left: 6px;
                i {
                  font-size: 10px;
                  vertical-align: middle;
                }
              }
            }
          }
          .integralBox {
            position: absolute;
            // height: 21px;
            // width: 119px;
            font-size: 14px;
            line-height: 21px;
            right: 0;
            top: 30px;
            color: #fff;
            background-color: #ff7c00;
            border-bottom-left-radius: 21px;
            border-top-left-radius: 21px;
            i {
              vertical-align: middle;
              margin-left: 10px;
              line-height: 21px;
            }
            span {
              vertical-align: middle;
              font-size: 12px;
              line-height: 21px;
              margin: 0 10px;
            }
          }
        }
        .van-grid {
          .van-grid-item {
            .van-grid-item__content {
              padding: 0px 6px 12px;
              p {
                margin: 0;
              }
              .UserListNumb {
                font-size: 16px;
                color: #333333;
              }
              .UserHeaderName {
                font-size: 14px;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
  .container {
    margin: 0 15px;
  }
  .my_container {
    margin-top: 95px;
    margin-bottom: 12px;
    background-color: #fff;
    .orderBox {
      .van-cell::after {
        left: 0;
      }
      .van-grid {
        .van-grid-item {
          .van-grid-item__content {
            .van-icon {
              color: #d7b782;
            }
            .van-grid-item__text {
              color: #666666;
            }
          }
        }
      }
    }
  }
  .boxLit {
    background-color: #ffffff;
    padding: 10px 0;

    .van-grid {
      .van-grid-item {
        .van-grid-item__content {
          .van-grid-item__icon {
            color: #333;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
